<template>
  <div>
    <!-- 顶部搜索栏 -->
    <van-search background="#00c27d" show-action placeholder="请输入小区或地址">
      <template #left>
        <van-icon name="arrow-left" size="6vw" />
      </template>
      <template #label>
        <div @click="$router.push('/city')">
          <i>上海</i><van-icon name="arrow-down" />|
        </div>
      </template>
      <template #action>
        <van-icon name="location-o" size="6vw"></van-icon>
      </template>
    </van-search>
    <!-- 下拉 筛选 -->
    <van-dropdown-menu>
      <!-- 区域 -->
      <van-dropdown-item title="区域">
        <template #default>
          <van-picker :columns="areaList" @change="onChange"></van-picker>
          <van-button type="default" class="left-btn">取消</van-button>
          <van-button type="primary" class="right-btn">确认</van-button>
        </template>
      </van-dropdown-item>
      <!-- 方式 -->
      <van-dropdown-item title="方式">
        <template #default>
          <van-picker :columns="wayList" />
          <van-button type="default" class="left-btn">取消</van-button>
          <van-button type="primary" class="right-btn">确认</van-button>
        </template>
      </van-dropdown-item>
      <!-- 租金 -->
      <van-dropdown-item title="租金">
        <template #default>
          <van-picker :columns="priceList" />
          <van-button type="default" class="left-btn">取消</van-button>
          <van-button type="primary" class="right-btn">确认</van-button>
        </template>
      </van-dropdown-item>
      <!-- 筛选 -->
      <van-dropdown-item title="筛选" @open="showPopup" />
      <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%', width: '80%' }"
      >
        <HomeItem title="户型" :list="filterRoom"></HomeItem>
        <HomeItem title="朝向" :list="filterOriented"></HomeItem>
        <HomeItem title="楼城" :list="filterFloor"></HomeItem>
        <HomeItem title="房屋亮点" :list="filterPick">
          <van-tabbar>
            <van-button type="default" class="left-btn">取消</van-button>
            <van-button type="primary" class="right-btn">确认</van-button>
          </van-tabbar>
        </HomeItem>
      </van-popup>
    </van-dropdown-menu>
    <!-- home-list -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="item in housesList"
        :key="item.houseCode"
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        :thumb="'http://liufusong.top:8080' + item.houseImg"
        @click="$router.push(`/houses/${item.houseCode}`)"
      >
        <template #tags>
          <van-tag
            plain
            type="danger"
            v-for="(item1, ind) in item.tags"
            :key="ind"
            >{{ item1 }}</van-tag
          >
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import HomeItem from '@/components/home-item.vue'
import { getConditionList, getHomeList } from '@/api/search'
export default {
  name: 'search-home-page',
  data() {
    return {
      value: '',
      active: 0,
      show: false,
      filterArea: [],
      filterWay: [],
      filterPrice: [],
      filterRoom: [],
      filterOriented: [],
      filterFloor: [],
      filterPick: [],
      list: [],
      housesList: [],
      loading: false,
      finished: false,
      params: {
        cityId: 'AREA|88cff55c-aaa4-e2e0',
        start: 1,
        end: 20
      }
    }
  },
  async created() {
    const { body } = await getConditionList()
    // 区域筛选
    this.filterArea = [body.area, body.subway]
    // 方式筛选
    this.filterWay = body.rentType
    const obj = {}
    this.filterArea.forEach((item) => {
      const arr = []
      item.children.forEach((it) => arr.push(it.label))
      obj[item.label] = arr
    })
    // console.log(obj)
    this.list = obj
    // 价格筛选
    this.filterPrice = body.price
    // 多项筛选
    this.filterRoom = body.roomType
    this.filterOriented = body.oriented
    this.filterFloor = body.floor
    this.filterPick = body.characteristic
  },
  computed: {
    wayList() {
      const arr = []
      this.filterWay.forEach((item) => arr.push(item.label))
      return arr
    },
    priceList() {
      const arr = []
      this.filterPrice.forEach((item) => arr.push(item.label))
      return arr
    },
    areaList() {
      return [{ values: Object.keys(this.list) }, { values: this.list['区域'] }]
    }
  },
  components: {
    HomeItem
  },
  methods: {
    onChange(picker, values) {
      picker.setColumnValues(1, this.list[values[0]])
    },
    showPopup() {
      this.show = true
    },
    async onLoad() {
      const {
        body: { list }
      } = await getHomeList(this.params)
      this.housesList.push(...list)
      this.loading = false
      this.params.start = this.params.end + 1
      this.params.end += 19
      if (list.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .left-btn {
  width: 30%;
}
::v-deep .right-btn {
  width: 70%;
}
</style>
